{"componentChunkName":"component---src-templates-posts-js","path":"/emptystates","result":{"data":{"mdx":{"id":"29ec684a-55ed-503a-83ec-65720323aa2a","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Empty States\",\n  \"path\": \"/emptystates\",\n  \"excerpt\": \"Empty states or zero-data state are a way to improve the user experience of your product, from onboarding to encouraging users to interact.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Masthead = makeShortcode(\"Masthead\");\nvar Link = makeShortcode(\"Link\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Masthead, {\n    title: \"Empty States\",\n    subheader: \"Empty states or zero-data state are a way to improve the user experience of your product, from onboarding to encouraging users to interact. Empty states are screens digital products that are not yet full of information, but which will eventually have content on them when the user populates them. Empty states can be used to guide users to action, teach them about the digital product or simply show a brand\\u2019s personality to provide an engaging user experience.\",\n    mdxType: \"Masthead\"\n  }), mdx(\"h2\", null, \"Content\"), mdx(\"p\", null, \"The components of an empty state consist of a non-interactive image and a text tagline. Empty states can also include a call to action depending on the situation. We should remember to use content that follows a consistent styling.\"), mdx(\"h4\", null, \"Use an image that:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sets a pleasant scene and complements the situation \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Is consistent with your brand or existing states\")), mdx(\"h4\", null, \"Include a tagline that:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Has a helpful message \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Is consistent with your brand or existing states\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conveys the purpose of the screen\")), mdx(\"h2\", null, \"Example\"), mdx(\"h5\", null, \"Displaying an empty state\"), mdx(\"p\", null, \"Empty states should look the same across both mobile and desktop\"), mdx(EmptyStates, {\n    mdxType: \"EmptyStates\"\n  }), mdx(\"h3\", null, \"Remember\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use existing empty states as a foundation for creating new ones. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"All empty states  should look and behave consistently across the digital platform. The basic styling should not change.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Follow the tips within the \", mdx(Link, {\n    to: \"/principles/language/\",\n    mdxType: \"Link\"\n  }, \"langauge princple\"), \" when creating tag lines and call to actions.  \")), mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Use engaging content that conveys the purpose of the screen.\"), mdx(\"p\", null, \"Use neutral images and colours that are consistent with your brand and other empty states.\"), mdx(\"p\", null, \"Use language that is helpful and empathetic.\"), mdx(\"p\", null, \"Use an encouraging call to action.\")), mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Don\\u2019t divert from the common styling and  components of empty states.\"), mdx(\"p\", null, \"Don\\u2019t use overly large or complex images.\"), mdx(\"p\", null, \"Avoid taglines that express urgency.\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Empty States"}}},"pageContext":{"id":"29ec684a-55ed-503a-83ec-65720323aa2a"}}}